<template>
    <div class="containerBox">
        <div class="shopHead" :style="{background: 'url(' + shopInfo.bgImg + ')' }">
            <div class="header">
                <van-icon name="arrow-left" @click="goBack"/>
                <span></span>
                <span></span>
            </div>

            <div class="info">
                <div class="positionAb"><img :src="shopInfo.avatar" :alt="shopInfo.name"></div>

                <div class="shop-name" @click="poupShow1=true">
                    <div class="pinpai">品牌</div>
                    <div class="name">{{shopInfo.name}}</div>
                    <div class="arrow-right"><van-icon name="play" /></div>
                </div>
                <div class="rateBox">
                    {{shopInfo.score}}分&nbsp;&nbsp;月售{{shopInfo.sellCount}}&nbsp;&nbsp;{{shopInfo.description}}<br>
                    配送费{{shopInfo.deliveryPrice}}元&nbsp;&nbsp;约{{shopInfo.deliveryTime}}分钟&nbsp;&nbsp;距离{{shopInfo.distance}}
                </div>
                <div class="youhui" @click="poupShow2 = true">
                    <div class="left">
                        <div class="type">{{shopInfo.supports&&shopInfo.supports[0].name}}</div>
                        <div class="content">{{shopInfo.supports&&shopInfo.supports[0].content}}</div>
                    </div>
                    <div class="right">
                        {{shopInfo.supports&&shopInfo.supports.length}}个优惠 <van-icon name="arrow-down" />
                    </div>
                </div>
            </div>
        </div>
        
        <van-sticky :offset-top="0">
            <van-tabs v-model="active" @change="changeTab">
                <van-tab title="点餐">
                    <div class="goods">
                        <div class="menu-wrapper">
                            <ul>
                                <li
                                    class="menu-item"
                                    v-for="(good, index) in shopGoods"
                                    :key="index"
                                    :class="{ current: index === currentIndex }"
                                    @click="clickMenuItem(index)"
                                >
                                    <span class="text">
                                        <img class="icon" :src="good.icon" v-if="good.icon" />
                                        {{ good.name }}
                                    </span>
                                </li>
                            </ul>
                        </div>
                        <div class="foods-wrapper">
                            <ul ref="foodsUl" class="foodsUl">
                                <li class="food-list-hook" v-for="(good, index) in shopGoods" :key="index">
                                    <h1 class="title">{{ good.name }}</h1>
                                    <ul>
                                        <li class="food-item" v-for="(food, index) in good.foods" :key="index" @click="openFoodDetail(food)">
                                            <div class="food-img">
                                                <img :src="food.icon" :alt="food.name"/>
                                            </div>
                                            <div class="content">
                                                <h2 class="name">{{ food.name }}</h2>
                                                <p class="desc" v-if="food.description">{{ food.description }}</p>
                                                <div class="extra">
                                                    <span class="count">月售{{ food.sellCount }}份</span>
                                                    <span>&nbsp;&nbsp;好评率{{ food.rating }}%</span>
                                                </div>
                                                <div class="price">
                                                    <span class="now">￥{{ food.price }}</span>&nbsp;&nbsp;
                                                    <span class="old" v-if="food.oldPrice">￥{{ food.oldPrice }}</span>
                                                </div>
                                            </div>
                                            <div class="purchaseCount">
                                                <van-button plain round type="warning" size="mini" icon="minus" v-show="food.count" @click.stop="updateFoodCount(food,false)"/>
                                                <p v-show="food.count">{{food.count}}</p>
                                                <van-button round type="warning" size="mini" icon="plus" @click.stop="updateFoodCount(food,true)"/>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>                    
                </van-tab>
                <van-tab title="评价">
                    <div class="review-wrapper">
                        <div class="review-box">
                            <div class="box-item1">
                                <div class="left">
                                    <p>{{shopInfo.score}}</p>
                                    <p>综合评分</p>
                                    <p>高于周边商家{{shopInfo.rankRate}}%</p>
                                </div>
                                <div class="right">
                                    <p>
                                        <img v-for="(url,index) in imgPath(shopInfo.serviceScore)" :src="url" :key="index" alt="star">
                                        <span>服务态度<span class="colors">{{shopInfo.serviceScore}}</span></span>
                                    </p>
                                    <p>
                                        <img v-for="(url,index) in imgPath(shopInfo.foodScore)" :src="url" :key="index" alt="star">
                                        <span>商品评分<span class="colors">{{shopInfo.foodScore}}</span></span>
                                    </p>
                                    <p>送达时间 <span style="color: #777;">{{shopInfo.deliveryTime}}分钟</span></p>
                                </div>
                            </div>
                            <div class="box-item2">
                                <div class="buttonBox">
                                    <button :class="{btnActive: rateType===-1}" @click="rateType=-1">全部{{shopRatings.length}}</button>
                                    <button :class="{btnActive: rateType===0}" @click="rateType=0">满意{{SatisfiedCount}}</button>
                                    <button :class="{btnActive: rateType===1}" @click="rateType=1">不满意{{shopRatings.length - SatisfiedCount}}</button>
                                </div>

                                <div class="showText" @click="onlyShowText=!onlyShowText">
                                    <van-icon name="certificate"  :class="{checked: onlyShowText}"/>
                                    <span>只看有内容的评价</span>
                                </div>
                                
                                <div class="reviewList">
                                    <div class="review-item" v-for="(rating,index) in reviewList" :key="index">
                                        <div class="avatar">
                                            <img :src="rating.avatar" alt="avatar"/>
                                        </div>
                                        <div class="rightReview">
                                            <p class="head">
                                                <span class="userName">{{rating.username}}</span>
                                                <span class="reviewTime">{{patternTime(rating.rateTime)}}</span>
                                            </p>
                                            <div class="star">
                                                <img v-for="(url,index) in imgPath(rating.score)" :src="url" :key="index" alt="star">
                                                <span class="score">{{rating.score}}</span>
                                            </div>
                                            <p class="text-content">{{rating.text}}</p>
                                            <div class="isRecommed">
                                                <i class="iconfont" :class="rating.rateType===0?'icon-zantianchongxiao':'icon-cai caiColor'"></i>
                                                <span class="recommend" v-for="(name,index) in rating.recommend" :key="index" >{{name}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="商家">
                    <div class="store-wrapper">
                        <div class="store-scroll-box">
                            <div class="box-item">
                                <h3 class="title">配送信息</h3>
                                <div class="content">
                                    <div class="deliverBox">
                                        <div class="top">
                                            <div class="deliver">{{shopInfo.description}}</div>
                                            <span>由商家配送提供配送，约{{shopInfo.deliveryTime}}分钟送达，距离{{shopInfo.distance}}</span>
                                        </div>
                                        <div class="bottom">配送费￥{{shopInfo.deliveryPrice}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-item">
                                <h3 class="title">活动与服务</h3>
                                <div class="content">
                                    <div class="service">
                                        <div class="item" v-for="(item,index) in shopInfo.supports" :key="index">
                                            <div class="type" :style="{backgroundColor: typeColor[item.type]}">{{item.name}}</div>
                                            <div class="content">{{item.content}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-item">
                                <h3 class="title">商家实景</h3>
                                <div class="content">
                                    <div class="imgBox" id="ImgBoxScrollX">
                                        <img v-for="(imgUrl,index) in shopInfo.pics" :key="index" :src="imgUrl" alt="商家照片">
                                    </div>
                                </div>
                            </div>
                            <div class="box-item">
                                <h3 class="title">商家信息</h3>
                                <div class="content">
                                    <div class="listInfo">
                                        <div class="list-item">
                                            <div class="left">品类</div>
                                            <div class="right">{{shopInfo.category}}</div>
                                        </div>
                                        <div class="list-item">
                                            <div class="left">商家电话</div>
                                            <div class="right">{{shopInfo.phone}}</div>
                                        </div>
                                        <div class="list-item">
                                            <div class="left">地址</div>
                                            <div class="right">{{shopInfo.address}}</div>
                                        </div>
                                        <div class="list-item">
                                            <div class="left">营业时间</div>
                                            <div class="right">{{shopInfo.workTime}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </van-sticky>


        <!-- 底部购物车 -->
        <div class="boxSize" v-show="active===0"></div>
        <div class="boxSize cart-absolute" v-show="active===0">
            <div class="cart">
                <div class="roundbox" :class="{activeBg: cartTotalPrice}">
                    <div class="round-circle" @click="handleCart">
                        <van-icon name="shopping-cart" />
                    </div>
                    
                    <div class="circle-absolut" v-show="cartTotalPrice">{{cartTotalCount}}</div>
                </div>
            </div>
            <div class="moneyBox">
                <p class="money1">￥{{cartTotalPrice}}</p>
                <p class="money-deliver">另需配送费￥{{shopInfo.deliveryPrice}}</p>
            </div>
            <div class="deliver" :class="{activeBg: cartTotalPrice>=shopInfo.minPrice}" @click="toPay">
                <span v-show="cartTotalPrice===0">￥{{shopInfo.minPrice}}起送</span>
                <span v-show="cartTotalPrice>0&&cartTotalPrice<shopInfo.minPrice">还差￥{{shopInfo.minPrice - cartTotalPrice}}起送</span>
                <span v-show="cartTotalPrice>=shopInfo.minPrice">去结算</span>
            </div>
        </div>


        <!-- 商家详情 -->
        <van-popup
            v-model="poupShow1"
            closeable
            round
            :close-on-click-overlay='false'
            :style="{ width: '90vw', maxWidth: '300px' }"
            class="descPoup"
        >   
            <div class="head">
                <div class="pinpai">品牌</div>
                <div class="name">{{shopInfo.name}}</div>
            </div>
            <div class="information"><span>公告</span></div>
            <div class="decs">{{shopInfo.bulletin}}</div>
        </van-popup>

        <!-- 优惠活动 -->
        <van-popup
            v-model="poupShow2"
            closeable
            round
            position="bottom"
            :style="{ height: '40%' }"
            class="youhuiPoup"
        >   
            <h2 class="youhuiTitle">优惠活动</h2>
            <div class="box">
                <div class="item" v-for="(item,index) in shopInfo.supports" :key="index">
                    <div class="type" :style="{backgroundColor: typeColor[item.type]}">{{item.name}}</div>
                    <div class="content">{{item.content}}</div>
                </div>
            </div>
        </van-popup>

        <!-- 购物车弹出层 -->
        <van-popup
            v-model="poupShow3"
            closeable
            position="bottom"
            round
            class="cartPoup"
        >   
            <div class="info">
                <span>购物车</span>
                <span class="delete" @click="clearCart"><van-icon name="delete-o"/>清空</span>
            </div>
            <div class="foodsBox">
                <template v-for='good in shopGoods'>
                    <div :key="good.name" >
                        <template v-for="food in good.foods">
                            <div class="food-item" :key="food.name" v-if="food.count">
                                <div class="food-img">
                                    <img :src="food.icon" :alt="food.name"/>
                                </div>
                                <div class="content">
                                    <h2 class="name">{{ food.name }}</h2>
                                    <div class="price">
                                        <span class="now">￥{{ food.price*food.count }}</span>&nbsp;&nbsp;
                                        <span class="old" v-if="food.oldPrice">￥{{ food.oldPrice*food.count }}</span>
                                    </div>
                                </div>
                                <div class="purchaseCount">
                                    <van-button plain round type="warning" size="mini" icon="minus" v-show="food.count" @click="updateFoodCount(food,false)"/>
                                    <p v-show="food.count">{{food.count}}</p>
                                    <van-button round type="warning" size="mini" icon="plus" @click="updateFoodCount(food,true)"/>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            <div class="blankBox"></div>
        </van-popup>

        <!-- 商品详情 -->
        <van-popup
            v-model="poupShow4"
            round
            :style="{ width: '90vw', maxWidth: '500px' }"
            class="foodPoup"
        >   
            <div class="imgBox">
                <img :src="detailFood.image" :alt="detailFood.name">
                <div class="goBack" @click="poupShow4=false"><van-icon name="arrow-left" /></div>
                <div class="info">{{detailFood.info}}</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import on from '@/assets/stars/star24_on@2x.png'
import half from '@/assets/stars/star24_half@2x.png'
import off from '@/assets/stars/star24_off@2x.png'

import { getShopInfoApi, getShopGoodsApi, getShopRatingsApi } from '@/api/ShopInfo/index.js'
import betterScroll from 'better-scroll'

import '@/assets/fonts/iconfont.css'

export default {
    name: 'Search',
    data() {
        return {
           active: 2,
           shopInfo: {},
           shopGoods: [],
           // 这个是商品信息最原始的值
           shopGoodsv1: [],
           shopRatings: [],
           poupShow1: false,
           poupShow2: false,
           poupShow3: false,
           poupShow4: false,
           typeColor: ['green', 'red', '#f18010'],
           tops: [],
           foodsWrapper: '',
           // 当前滚动的距离
           scrollY: 0,
           cartList:[],
           
           detailFood: {},

           rateType: -1,  //-1全部 0满意 1不满意
           onlyShowText: false,  // 只看有内容的评价

           // 评价tab模块的滑块对象
           reviewBoxScroll:null,
        }
    },
    created() {
        this.active = Number(localStorage.getItem('tabActive')) || 0
        this.getShopInfo()
        this.getInit()
    },
    computed: {
        currentIndex() {
            const index = this.tops.findIndex((top,ins) => {
                return this.scrollY>=this.tops[ins]&&this.scrollY<this.tops[ins+1]
            })
            return index
        },
        // 购物车合计的价格
        cartTotalPrice() {
            let sum = 0
            this.cartList.forEach(item => {
                sum+=item.price*item.count
            })
            return sum
        },
        // 物品总件数
        cartTotalCount() {
            let count = 0
            this.cartList.forEach(item => {
                count+=item.count
            })
            return count
        },
        // 满意评价的条数
        SatisfiedCount() {
            // 0满意/1不满意
            let arr = this.shopRatings.filter(item => item.rateType === 0)
            return arr.length
        },
        // 筛选出符合条件的评论列表
        reviewList() {
            // 条件1  this.rateType  -1全部/0满意/1不满意
            // 条件2  this.onlyShowText  是否只显示有内容的评论  true只显示有内容评价， false 不受限制，都显示
            let list = this.shopRatings.filter(item => {
                return (this.rateType===item.rateType || this.rateType === -1) && (this.onlyShowText ? item.text.length>0 : 1 )
            })

            // 当滑块内的DOM结构发生改变时，需要刷新这个滑块对象， 不能多次初始化，否则会卡顿
            this.reviewBoxScroll?.refresh()
            // console.log(list.length)
            return  list            
        }
    },
    methods: {
        goBack() {
            this.$router.back()
        },
        // 切换tab
        changeTab(val) {
            // this.active = val
            localStorage.setItem('tabActive', val)
            this.getInit()
        },
        async getInit() {
            // 解决active为0或1时，商家信息不请求，页面头部无数据显示的bug
            if(this.active == 0) {
                await this.getShopGoods()
                // 初始化滑块组件
                this.initScroll()
            } else if (this.active == 1) {
                await this.getShopRatings()
                // 初始化滑块组件
                this.initShopRatingsScroll()
            } else {
                await this.getShopInfo()
                // 初始化滑块组件
                this.initShopInfoScroll()
            }
        },
        // 1.0 商家商品
        async getShopGoods() {
            const res = await getShopGoodsApi()
            // console.log(res)
             if(res.status === 200) {
                this.shopGoods = res.data.data
                // 深拷贝
                this.shopGoodsv1 = JSON.parse(JSON.stringify(res.data.data))
                
                this.initTops()
            }
        },
        // 2.0 商家店铺评论评分
        async getShopRatings() {
            const res = await getShopRatingsApi()
            // console.log(res)
             if(res.status === 200) {
                this.shopRatings = res.data.data
            }
        },
        // 商铺评分的五星标准
        imgPath(score) {
            let imgPathArr = []
            while(score>=1) {
                imgPathArr.push(on)
                score--
            }
            if (score>=0.5 && score<1) {
                imgPathArr.push(half)
            }
            while(imgPathArr.length<5) {
                imgPathArr.push(off)
            }
            return imgPathArr
        },
        // 3.0 商家信息
        async getShopInfo() {
            const res = await getShopInfoApi()
            // console.log(res)
            if(res.status === 200) {
                this.shopInfo = res.data.data
            }
        },

        // 1.0 *********************
        // 初始化tops
        initTops() {
           this.$nextTick(() => {
                // 初始化tops, 每一个li的上边框距离顶部的距离，在DOM挂载完成之后再执行
                const lis = this.$refs.foodsUl.getElementsByClassName('food-list-hook')

                let tops = [], sum = 0
                tops.push(sum)
                for (const item of lis) {
                    sum = sum + item.clientHeight

                    tops.push(sum)
                }
                this.tops = tops
                // console.log('this.tops:', this.tops)
           })
        },
        initScroll() {
            this.$nextTick(() => {
                // 初始化组件
                new betterScroll('.menu-wrapper', {
                    click: true
                })
                this.foodsWrapper = new betterScroll('.foods-wrapper', {
                    // probeType值为0,1时，不监听；probeType为2时，手指触摸时监听，惯性滑动不监听；值为3时，都监听
                    probeType: 3,
                    click: true
                })

                // 给右侧列表绑定scroll监听
                this.foodsWrapper.on("scroll", ({ x, y }) => {
                    // console.log("scroll", x, y)
                    this.scrollY = Math.abs(y)
                })

                // 给右侧列表绑定scroll结束的监听
                this.foodsWrapper.on("scrollEnd", ({ x, y }) => {
                    // console.log("scrollEnd", x, y)
                    this.scrollY = Math.abs(y)
                })
            })
        },

        clickMenuItem(index) {
            // console.log(index)

            // 使用右侧列表滑动到对应的位置,得到目标位置的scrollY
            this.scrollY = this.tops[index]
            // console.log('this.scrollY:', this.scrollY)
            // 平滑滑动右侧列表 （x,y,time）
            this.foodsWrapper.scrollTo(0, -this.scrollY, 500)
        },
        // 修改商品的数量
        updateFoodCount(food,type=true) {
            if(type) {  // 加
                if(!food.count) {
                    this.$set(food, 'count', 1)
                }else {
                    food.count++
                }
            } else {  // 减
                if(food.count){
                    food.count--
                }
            }
            this.cartList = []
            this.shopGoods.forEach( item => {
                item.foods.forEach(food => {
                    if(food.count) {
                        this.cartList.push(food)
                    }
                })
            })
            // console.log(this.cartList)

            if(this.cartList.length === 0) {
                this.poupShow3 = false
            }
            // console.log('food:', food)
            // food单个商品修改会响应到shopGoods商品列表
            // console.log('this.shopGoods:', this.shopGoods)
        },
        // 查看购物车
        handleCart() {
            // console.log('查看购物车')
            if(this.cartTotalPrice) {
                this.poupShow3 = !this.poupShow3
            }else {
                return
            }
        },
        // 清空购物车
        clearCart() {
            // 重新赋值为原始数据
            this.shopGoods = JSON.parse(JSON.stringify(this.shopGoodsv1))
            this.poupShow3 = false
            this.cartList = []
        },
        // 结算
        toPay() {
            if(this.cartTotalPrice>=this.shopInfo.minPrice) {
                console.log('结算')
            }else {
                return
            }
        },
        // 商品详情弹出层
        openFoodDetail(food) {
            this.detailFood = food
            this.poupShow4 = true
        },
        // 2.0 ***************
        initShopRatingsScroll() {
            this.$nextTick(() => {
                // 固定高度的父元素
              this.reviewBoxScroll =  new betterScroll('.review-wrapper', {
                    probeType: 3,
                    click: true
                })
            })
        },
        // 时间戳转换格式 yyyy-mm-dd hh:mm:ss
        patternTime(time) {
            let dateTime = new Date(time)

            let year = dateTime.getFullYear().toString().padStart(4, '0')
            let month = (dateTime.getMonth() + 1).toString().padStart(2, '0')
            let date = dateTime.getDate().toString().padStart(2, '0')
            let hours = dateTime.getHours().toString().padStart(2, '0')
            let minutes = dateTime.getMinutes().toString().padStart(2, '0')
            let seconds = dateTime.getSeconds().toString().padStart(2, '0')

            return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds

        },
        // 3.0 ****************
        // 初始化组件
        initShopInfoScroll() {
            this.$nextTick(() => {
                // 固定高度的父元素
                new betterScroll('.store-wrapper', {
                    probeType: 3,
                    click: true
                })
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.containerBox {
    box-sizing: border-box;
    padding: 0;
}
.shopHead {
    // background-color: pink;

    .header {
        padding: 0 10px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: transparent;
        .van-icon {
            font-size: 22px;
            font-weight: 500;
            color: #fff;
        }
    }

    .info {
        background-color: #fff;
        border-bottom: 1px solid #ededed;
        position: relative;
        margin-top: 20px;
        padding: 30px 0 10px;

        .positionAb {
            position: absolute;
            width: 60px;
            height: 60px;
            // background-color: #f18010;
            border-radius: 5px;
            left: calc(50% - 30px);
            top: calc(-36px);
            overflow: hidden;
            border: 1px solid #ededed;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .shop-name {
            height: 30px;
            width: 66%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;

            .pinpai {
                width: 30px;
                height: 18px;
                text-align: center;
                background-color: #f18010;
                border-radius: 4px;
                color: #fff;
                font-weight: bold;
                font-size: 12px;
            }
            .name {
                margin: 0 0 0 10px;
                width: 0;
                flex: 1;
                font-size: 18px;
                font-weight: bold;
                text-align: center;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .arrow-right {
                width: 16px;
                font-size: 16px;
            }
        }
        .rateBox {
            width: 80%;
            margin: 5px auto 10px;
            text-align: center;
            color: #888;
            font-size: 13px;
            line-height: 20px;
        }
        .youhui {
            width: 70%;
            margin: 0 auto;
            font-size: 14px;
            padding: 5px;
            border: 1px solid #ededed;
            margin-top: 10px;

            display: flex;
            align-content: center;
            .left {
                width: 0;
                flex: 1;

                display: flex;
                .type {
                    width: 26px;
                    height: 18px;
                    background-color: green;
                    border-radius: 3px;
                    padding: 0 2px;
                    margin-right: 4px;
                    color: #fff;
                    font-weight: bold;
                    font-size: 12px;
                }
                .content {
                    width: 0;
                    flex: 1;
                    
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

            }
            .right {
                width: 68px;
                margin-left: 10px;
            }
        }
    } 
}

/deep/ .van-tabs--line .van-tabs__wrap {
    border-bottom: 1px solid #efefef;
}

/deep/ .van-tabs__line {
    background-color: #f18010;
}

/deep/ .van-tab--active {
    font-weight: bold;
    color: #f18010;
}
// 针对居中显示的弹出层，比底部购物车的层级高
// /deep/ .van-overlay {
//     z-index: 10000 !important;
// }


// 商家详情
.descPoup {
    z-index: 10000 !important;
    .head {
        height: 30px;
        margin: 10px 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        .pinpai {
            width: 30px;
            height: 18px;
            text-align: center;
            background-color: #f18010;
            border-radius: 4px;
            color: #fff;
            font-weight: bold;
            font-size: 12px;
        }
        .name {
            margin: 0 0 0 10px;
            width: 0;
            flex: 1;
            font-size: 18px;
            font-weight: bold;
            text-align: center;

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .information {
        width: 120px;
        height: 20px;
        margin: 16px auto;

        // background-color: pink;
        background-image: linear-gradient(90deg, #fff, #f18010 50%, #fff);
        background-size: 100% 2px;
        background-position: center center;
        background-repeat: no-repeat;
       
        font-size: 14px;
        font-weight: bold;
        color: #f18010;
        text-align: center;
        span {
            background-color: #fff;
            padding: 0 6px;
        }
    }
    
    .decs {
        padding: 0 20px 20px;
        font-size: 14px;
        color: #555;
    }
}

// 优惠活动弹出层
.youhuiPoup {
    z-index: 10000 !important;
    width: 100%;
    padding: 0 16px 0;
    box-sizing: border-box;

    .youhuiTitle {
        height: 50px;
        line-height: 50px;
        text-align: center;

        font-size: 22px;
        font-weight: bold;
    }

    .box {
        height: calc(100% - 55px);
        // background-color: pink;
        overflow: scroll;
    }
    
    .item {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        font-size: 16px;
        padding: 5px 0;
        margin: 10px;

        .type {
            width: 40px;
            height: 19px;
            text-align: center;
            color: #fff;
            font-size: 15px;
            font-weight: bold;
            margin-right: 6px;
            border-radius: 4px;
        }
        .content {
            width: 0;
            flex: 1;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
        }
    }
}
// 购物车弹出层
.cartPoup {
    width: 100vw;
    height: 50vh;

    box-sizing: border-box;

    .info {
        // background-color: pink;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #555;

        .delete {
            font-size: 14px;
            color: #888;
            margin-left: 20px;
            font-weight: normal;
        }
    }
    .foodsBox {
        // 上面50px,下面60px
        height: calc(50vh - 110px);
        overflow: scroll;
        
        padding: 0 30px;

        .food-item {
            display: flex;
            align-items: center;

            padding: 10px 0;
            border-bottom: 1px solid #efefef;
            
            .food-img {
                width: 60px;
                height: 60px;
                margin-right: 8px;
                border-radius: 8px;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .content {
                width: 0;
                flex: 1;
                font-size: 12px;
                color: #777;

                .name {
                    font-size: 14px;
                }
                .price {
                    .now {
                        color: rgb(224, 23, 23);
                    }
                    .old {
                        color: #888;
                        text-decoration: line-through;
                    }
                }
            }

            .purchaseCount {
                width: 24px;
                // background-color: pink;
                display: flex;
                align-content: center;
                flex-wrap: wrap;

                .van-button {
                    width: 20px;
                    height: 20px;
                    margin: 0 auto;
                }
                
                p {
                    width: 20px;
                    margin: 4px auto;
                    text-align: center;
                    font-size: 12px;
                    color: #666;
                }
            }
        }
    }

    .blankBox {
        width: 100%;
        height: 60px;
    }
}

// 商品详情弹出层
.foodPoup {
    z-index: 10000 !important;
    .imgBox {
        width: 100%;
        height: auto;
        position: relative;
        img {
            width: 100%;
            height: 100%;
        }

        .goBack {
            position: absolute;
            top: 5px;
            left: 8px;

            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            background-color: rgba($color: #000000, $alpha: 0.5);

            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }

        .info {
            position: absolute;
            bottom: 5px;
            left: 8px;
            font-size: 14px;
            color: #fff;
        }
    }
    
}


// 商品
.goods {
    display: flex;
    // 上面的导航栏44px,底部的购物车50px
    height: calc(100vh - 94px);
    overflow: hidden;
    background-color: #fff;

    .menu-wrapper {
        height: 100%;
        overflow: scroll;

        width: 20%;
        max-width: 100px;
        margin-right: 10px;
        background-color: #ededed;
        .current {
            background-color: #fff;
            color: #f18010;
        }

        .menu-item {
            height: 50px;

            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #555;

            border-bottom: 1px solid #dfdfdf;

            .icon {
                width: 16px;
                margin-right: 4px;
            }
        }
    }

    .foods-wrapper {
        flex: 1;
        height: 100%;  // 高度大小固定
        // 这是浏览器端的滚动条，用了better-scroll插件，==> 触屏滚动
        // overflow: scroll;

        // 包裹子元素的容器， 高度要比foods-wrapper的大
        .foodsUl {
            padding-bottom: 20px;
            // 右边每一项nav
            .food-list-hook {

                .title {
                    font-size: 14px;
                    height: 20px;
                    line-height: 20px;
                    color: #666;
                    padding-left: 6px;
                    padding-top: 15px;
                    font-weight: bold;
                }

                ul {

                    .food-item {
                        // background-color: pink;
                        display: flex;
                        align-items: center;
                        margin: 0px 3vw 0 0;

                        padding: 15px 0;
                        border-bottom: 1px solid #efefef;
                        
                        .food-img {
                            width: 80px;
                            height: 80px;
                            margin-right: 8px;
                            border-radius: 8px;
                            overflow: hidden;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .content {
                            width: 0;
                            flex: 1;
                            font-size: 12px;
                            color: #777;

                            .name {
                                font-size: 14px;
                            }
                            .desc {
                                // 仅显示两行，溢出内容省略号代替
                                margin: 5px 0 0 6px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp:2;
                                -webkit-box-orient:vertical;
                            }

                            .extra {
                                margin:  5px 0;
                            }

                            .price {
                                .now {
                                    color: rgb(224, 23, 23);
                                }
                                .old {
                                    color: #888;
                                    text-decoration: line-through;
                                }
                            }
                        }

                        .purchaseCount {
                            width: 24px;
                            // background-color: pink;
                            display: flex;
                            align-content: center;
                            flex-wrap: wrap;

                            .van-button {
                                width: 20px;
                                height: 20px;
                                margin: 0 auto;
                            }
                            
                            p {
                                width: 20px;
                                margin: 4px auto;
                                text-align: center;
                                font-size: 12px;
                                color: #666;
                            }
                        }
                    }
                }
            }
        }
    }
}


// 父容器，固定高度
.review-wrapper {
    height: calc(100vh - 44px);
    background: #efefef;
    overflow: hidden;

    .review-box {
        overflow: hidden;

        .box-item1 {
            background: #fff;
            margin: 15px 0;
            padding: 16px 14px;
            display: flex;

            .left {
                width: 40%;
                border-right: 1px solid #efefef;
                display: flex;
                align-content: center;
                flex-wrap: wrap;
        
                p{
                    width: 100%;
                    text-align: center;
                    font-size: 14px;
                }
                p:nth-child(1) {
                    font-size: 20px;
                    color: #f18010;
                    font-weight: bold;
                }
                p:nth-child(2) {
                    margin: 7px 0;
                }
                p:nth-child(3) {
                    font-size: 12px;
                    color: #555;
                }

            }
            .right {
                width: 60%;
                display: flex;
                flex-wrap: wrap;
                p {
                    width: 100%;
                    text-align: center;
                    font-size: 14px;

                    img {
                        width: 16px;
                        height: 16px;
                    }

                    span {
                        margin-left: 8px;
                    }
                    .colors {
                        margin: 0;
                        color: #f18010;
                    }
                }

                p:nth-child(2) {
                    margin: 5px 0;
                }
            }
        }

        .box-item2 {
            background: #fff;
            margin: 15px 0;
            padding: 16px 14px;

            .buttonBox {
                button {
                    padding: 8px 12px;
                    background-color: #ededed;
                    color: #555;
                    font-size: 14px;
                    border-radius: 3px;
                    margin-right: 10px;
                    border: 0;
                    outline: none;
                }
                button:last-child {
                    margin-right: 0;
                }
                .btnActive {
                    color: #fff;
                    background-color: #f18010;
                }
            }
            
            .showText {
                display: flex;
                width: 100%;
                margin: 15px 0;
                align-items: center;

                .van-icon {
                    color: #aaa;
                    font-size: 26px;
                    font-weight: bolder;
                    margin-right: 5px;
                }
                .checked {
                    color: #f18010;
                }
                span {
                    color: #888;
                    font-size: 13px;
                }
            }

            .reviewList {
               .review-item {
                    padding: 20px 5px;
                    display: flex;
                    border-top: 1px solid #efefef;

                    .avatar {
                        width: 36px;
                        margin-right: 10px;

                        img {
                            width: 100%;
                            border-radius: 50%;
                        }
                    }

                    .rightReview {
                        flex: 1;
                        width: 0;
                        font-size: 14px;
                        color: #999;

                        .head {
                            font-size: 13px;
                            overflow: hidden;
                            .userName {
                                color: #444;
                                float: left;
                            }
                            .reviewTime {
                                float: right;
                            }
                        }

                        .star {
                            margin: 6px 0;
                            img {
                                width: 12px;
                                height: 12px;
                            }
                            .score {
                                margin-left: 6px;
                            }
                        }

                        .text-content {
                            line-height: 18px;
                            margin: 8px 0;
                            color: #444;
                        }
                        .isRecommed {
                            .iconfont {
                                font-size: 18px;
                                margin-right: 6px;
                                color: #f18010;
                            }
                            .caiColor {
                                color: #777;
                            }

                            .recommend {
                                font-size: 12px;
                                display: inline-block;
                                padding: 1px 2px;
                                border-radius: 3px;
                                border: 1px solid #efefef;
                                margin: 0 5px 5px 0;
                            }
                        }
                    }

               } 
            }
        }
    }
}

// 父容器，固定高度
.store-wrapper {
    height: calc(100vh - 44px);
    background: #efefef;
    // overflow: scroll;
    overflow: hidden;

    // 子元素用一个容器包裹起来，高度大小由内容撑开，其高度大于父容器，且父容器溢出部分要隐藏
    .store-scroll-box {
        // 解决 子元素上外边距引起父元素向下移
        overflow: hidden;
        // 高度大小由内容撑开

        .box-item {
            background: #fff;
            margin: 15px 0;
            padding: 16px 14px;

            .title {
                font-weight: bold;
                margin-bottom: 15px;
            }
            .content {
                // background-color: pink;

                .deliverBox {
                    font-size: 14px;
                    color: #555;
                    .top {
                        display: flex;
                        align-items: center;

                        .deliver {
                            padding: 2px 4px;
                            color: #fff;
                            background-color: #f18010;
                            margin-right: 10px;
                            white-space: nowrap;
                            border-radius: 5px;
                            line-height: 20px;
                        }
                    }
                    .bottom {
                        margin-top: 8px;
                    }
                }

                .service {
                    .item {
                        display: flex;
                        align-items: center;
                        flex-wrap: nowrap;
                        font-size: 15px;
                        padding: 5px 0;
                        margin: 5px 0;

                        .type {
                            width: 40px;
                            height: 19px;
                            text-align: center;
                            color: #fff;
                            font-size: 14px;
                            font-weight: bold;
                            margin-right: 6px;
                            border-radius: 4px;
                        }
                        .content {
                            width: 0;
                            flex: 1;
                            color: #444;
                        }
                    }
                }

                .imgBox {
                    height: 120px;
                    white-space: nowrap;
                    // overflow-x: scroll;
                    // overflow-y: hidden;
                    overflow: hidden;

                    img {
                        height: 100%;
                        width: auto;
                        margin: 0 6px 0 0;
                        padding: 0;
                    }
                }

                .listInfo {
                    .list-item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        padding: 10px 0;
                        border-bottom: 1px solid #efefef;

                        .left {
                            font-size: 15px;
                            color: #222;
                        }
                        .right {
                            font-size: 13px;
                            color: #555;
                        }
                    }
                }
            }
        }
    }
}


// 底部购物车
.boxSize {
    height: 50px;
    width: 100vw;
}
.cart-absolute {
    background-color: #000;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9999;

    display: flex;

    color: #fff;
    .cart {
        height: 100%;
        width: 80px;
        position: relative;

        .roundbox {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #000;
            position: absolute;
            top: -20px;
            left: calc(50% - 28px);

            padding: 5px;
            box-sizing: border-box;
            color: #aaa;

            position: relative;

            .round-circle {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                // background: pink;
                background-color: rgba($color: #888, $alpha: 0.3);

                line-height: 50px;
                text-align: center;
                font-size: 32px;
            }

            .circle-absolut {
                background-color: red;
                color: #fff;
                font-weight: bold;
                padding: 4px;
                font-size: 12px;
                border-radius: 50%;

                min-width: 22px;
                box-sizing: border-box;
                text-align: center;

                position: absolute;
                top: 0;
                right: 0;
            }
        }
        .activeBg {
            background: #f18010;
            color: #fff;
        }

    }
    .moneyBox {
        width: 0;
        flex: 1;
        height: 100%;
        padding: 7px 0;

        .money1 {
            font-weight: bold;
            font-size: 16px;
            line-height: 16px;
        }
        .money-deliver {
            font-size: 14px;
            line-height: 14px;
            margin-top: 6px;
        }

    }
    .deliver {
        width: 100px;
        height: 100%;
        background: rgba($color: #888, $alpha: 0.5);
        font-size: 14px;
        font-weight: bold;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .activeBg {
        background: #f18010;
    }
}
</style>